$(function(){
    //页面初始化

    // modeList:场景列表模拟数据，后台通过ajax获取
    var modeList = [
        {
            id:0,
            title:"说课模式一",// 标题
            imageUrl:"images/bac/picmode.png",
            status:2,// 状态属性：0为状态异常，1为未上传，2为已上传
            mode:1, // 模式属性：0为主播模式，1为教学模式
        },
        {
            id:1,
            title:"微课模式一",// 标题
            imageUrl:"images/bac/mode2.png",
            status:2,// 状态属性：0为状态异常，1为未上传，2为已上传
            mode:0, // 模式属性：0为主播模式，1为教学模式
        },
        {
            id:2,
            title:"直播模式一",// 标题
            imageUrl:"images/bac/mode3.png",
            status:2,// 状态属性：0为状态异常，1为未上传，2为已上传
            mode:1, // 模式属性：0为主播模式，1为教学模式
        },
        {
            id:3,
            title:"直播模式二",// 标题
            imageUrl:"images/bac/mode4.png",
            status:0,// 状态属性：0为状态异常，1为未上传，2为已上传
            mode:1, // 模式属性：0为主播模式，1为教学模式
        },
        {
            id:4,
            title:"说课模式一",// 标题
            imageUrl:"images/bac/mode1.png",
            status:0,// 状态属性：0为状态异常，1为未上传，2为已上传
            mode:0, // 模式属性：0为主播模式，1为教学模式
        },
        {
            id:5,
            title:"直播模式一",// 标题
            imageUrl:"images/bac/mode1.png",
            status:0,// 状态属性：0为状态异常，1为未上传，2为已上传
            mode:0, // 模式属性：0为主播模式，1为教学模式
        },
        {
            id:6,
            title:"微课模式一",// 标题
            imageUrl:"images/bac/mode2.png",
            status:1,// 状态属性：0为状态异常，1为未上传，2为已上传
            mode:1, // 模式属性：0为主播模式，1为教学模式
        },
        {
            id:7,
            title:"直播模式二",// 标题
            imageUrl:"images/bac/mode3.png",
            status:1,// 状态属性：0为状态异常，1为未上传，2为已上传
            mode:1, // 模式属性：0为主播模式，1为教学模式
        },
        {
            id:8,
            title:"说课模式一",// 标题
            imageUrl:"images/bac/mode4.png",
            status:1,// 状态属性：0为状态异常，1为未上传，2为已上传
            mode:1, // 模式属性：0为主播模式，1为教学模式
        }

    ];

    var defaultImgUrl = "images/bac/mode1.png";
    // sh.createList 第一个参数为需渲染的数据，第二个参数为一页显示的数量，第三个参数为需要渲染的dom外层节点,第四个参数为默认图片的地址，第五个参数是绘制时页面留在第几页
    sh.createList(modeList,8,".mode-list",defaultImgUrl);

    // ...被用户修改过的场景列表，包含当前场景的id和模式值
    var modifiedModeList = [];

    //点击模式按钮，切换当前场景的模式
    $(".mode-list").on("click",".mode-item .mode-change-btn a",function () {
        $(this).addClass("active").siblings("a").removeClass("active");
        var modifiedItem = {};
        modifiedItem["id"] = $(this).parent().attr("index");
        modifiedItem["mode"] = $(this).index(); // 等于当前a的序号

        // 修改场景列表中对应id的mode的值
        for(var i=0;i<modeList.length;i++){
             if(modeList[i]["id"] == modifiedItem["id"]){
                    modeList[i]["mode"] = modifiedItem["mode"];
             }
        }
        //将修改了的场景添加进修改过的场景列表中
        if(modifiedModeList.length==0){
            modifiedModeList.push(modifiedItem);
        }else{
            var flag = 0;
            for(var i=0;i<modifiedModeList.length;i++){
                if(modifiedModeList[i]["id"] == modifiedItem["id"]){
                    modifiedModeList[i]["mode"] = modifiedItem["mode"];
                    flag=1;
                    break;
                }else{
                    flag= 0;
                }
            }
            flag == 0 && modifiedModeList.push(modifiedItem);
        }
        // console.log(modifiedModeList);
    })

    // 点击完成按钮，发送修改数据modifiedModeList
    $("#finshedBtn").on("click",function () {
       //...后台将modifiedModeList通过ajax发送到后台，取得修改过的场景的对象数组，包含场景的id和场景mode
        // console.log(modifiedModeList);
    })
})

// 翻页回调函数，后台不需要改动
function getDataAndSortCallback(targetUl,startIndex,endIndex,data,defaultImgUrl){
    var indexRange = endIndex-startIndex; // 需总共请求的数据条数
    var contentHtml = "";
    for (var j = startIndex; j < endIndex; j++){ // 服务器端分页改为for(var j=0; j < indexRange; j++)
        var statusClass = data[j].status == 0 ? "error-status" :
                          data[j].status == 1 ? "unuploaded-status" : "uploaded-status";
        var btnHtml = "";
        if(data[j].mode == 0){
            // index属性为该条模式数据的id值
            btnHtml =  '<div class="mode-change-btn" index= '+ data[j].id +'>\n' +
                '               <a href="####" class="active">主播模式</a>\n' +
                '               <a href="####">教学模式</a>\n' +
                '       </div>\n'
        }else{
            // index属性为该条模式数据的id值
            btnHtml =  '<div class="mode-change-btn" index= '+ data[j].id +'>\n' +
                '               <a href="####">主播模式</a>\n' +
                '               <a href="####" class="active">教学模式</a>\n' +
                '       </div>\n'
        }
       // index属性为该条模式数据的id值
      contentHtml += '           <div class="mode-item '+ statusClass +'" index= '+ data[j].id +'>\n' +
          '                            <div class="mode-img">\n' +
          '                                <img src="'+data[j].imageUrl+'" alt="">\n' +
          '                            </div>\n' +
          '                            <div class="mode-title">\n' +
          '                                '+ data[j].title+'\n' +
          '                            </div>\n' + btnHtml +
          '                        </div>';
    }
    targetUl.append(contentHtml);
}

